import { APIGoodsDetail, APIAddCart } from "./fetch.js";
import { queryString, getCookie } from './tools.js';

layui.use(['layer'], function () {
    var gid = queryString('gid');
    APIGoodsDetail({
        gid
    }).then(({ data: { gname, detail, img, imgs, desc, price } }) => {
        console.log({ gname, detail, img, imgs, desc });
        imgs = JSON.parse(imgs);
        var tpl = imgs.reduce((total, item) => total + `<img  class="simg" src="${item}" alt="" />`, '')
        console.log(tpl);
        var html = '';
        html += `
            <div class="banner">
                <div class="left_box">
                    <img src="${img}" alt="">
                     <div class="show"></div>
                     <div class="rbox"><img class="bimg" src="${img}" alt=""></div>
                </div>
               
                <div class="right_box">                  
                   ${tpl}
                </div>
            </div>
            <div class="content_box">
                <div class="content_left">
                    <h1>${gname}</h1>
                    <div class="content_label">
                        <a href="">情侣</a>
                        <a href="">人气</a>
                        <a href="">含酒</a>
                    </div>
                    <div class="content_label1">
                        <img src="../src/imgs/pcicon-19.png" alt="">
                        <span>玫瑰甘露、玫瑰蜜饯</span>
                        <img src="../src/imgs/pcicon-03.png" alt="">
                        <span>百利甜酒</span>
                        <div class="spp">
                            <p>${desc}</p>
                        </div>                      
                    </div>
                    <div class="content_bt">
                        <i class="i1"></i>
                        <span>保鲜条件：0－4℃保藏10小时，5℃食用为佳</span><br>
                        <!-- <i></i><span>参考甜度：</span> -->
                    </div>
                </div>              
                <div class="content_right">
                    <p>${price}元</p>
                    <div class="options">
                        <i class="i2"></i>
                        <span>约13.5x13.5</span>
                        <i class="i3"></i>
                        <span>适合3-4人分享</span>
                        <i class="i4"></i>
                        <span>含5套餐具（蜡烛需单独订购）</span><br>
                        <i class="i5"></i>
                        <span>最早今天 19:30配送</span>
                        <div class="options_size">
                            <span>商品规格</span>
                            <ul>
                                <li><i class="ii i"></i><p>454g</p><p>(1.0磅)</p></li>
                                <li><i class="i"></i><p>681g</p><p>(1.5磅)</p></li>
                                <li><i class="i"></i><p>908g</p><p>(2.0磅)</p></li>
                                <li><i class="i"></i><p>1362g</p><p>(3.0磅)</p></li>
                                <li><i class="i"></i><p>2270g</p><p>(5.0磅)</p></li>
                            </ul>
                        </div>
                        <div class="options_btn">
                            <button class="btn1">立即购买</button><br>
                            <button class="btn2">加入购物车</button>
                            <div class="addcart">
                                <p><i></i>成功添加购物车</p>
                                <a href="http://127.0.0.1:5500/2004/sweetheart/html/cart.html">查看购物车</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="imgs">
                ${detail}
            </div>
        `
        $('.bigbox_1').html(html);





        $(document).on('mouseover', '.simg', function () {
            $('.left_box img').attr('src', $(this).attr('src'))
        })

        
        $(document).on('click', 'li', function (e) {
            $('.i').hide()
            var tage = this.tagName
            console.log(tage);
            $(this).children('.i').show();

        });


        var timer = null
        $(document).on('click', '.btn2', function () {
            var username = getCookie('login_user');
            console.log(username);
            if (!username) {
                sessionStorage.back = location.href;
                layer.msg('您还未登录')
                clearTimeout(timer);
                timer = setTimeout(() => {
                    location.href = 'http://127.0.0.1:5500/2004/sweetheart/html/denglu.html';
                }, 1000)

            } else {
                APIAddCart({
                    gid,
                    username,
                    img: $('.left_box img').attr('src'),
                    gname,
                    price,
                    count: 1
                }).then((code, msg) => {
                    if (code) {
                        $('.addcart').css('display', 'block')
                        clearTimeout(timer);
                        timer = setTimeout(() => {
                            $('.addcart').css('display', 'none')
                        }, 2000)


                    } else {
                        layer.msg(msg)
                    }
                })
            }


        })

        $(document).on('mouseenter', '.addcart', function () {
            $('.addcart').css('display', 'block')
        })

    })

});

$(document).on('mouseenter', '.left_box', function () {
    $('.show').css('display', 'block');
    $('.rbox').css('display', 'block');
})

$(document).on('mouseleave', '.left_box', function () {
    $('.show').css('display', 'none');
    $('.rbox').css('display', 'none')
})
$(document).on('mousemove', '.left_box', function (e) {
    var x = e.pageX - $('.show').width() / 2 - $('.left_box').offset().left;
    var y = e.pageY - $('.show').outerHeight() / 2 - $('.left_box').offset().top;
    var maxLeft = $('.left_box').width() - $('.show').width();
    var maxTop = $('.left_box').height() - $('.show').height();
    // var maxTop = 

    if (x < 0) {
        x = 0
    }
    if (y < 0) {
        y = 0
    }
    if (x > maxLeft) {
        x = maxLeft
    }
    if (y > maxTop) {
        y = maxTop
    }

    $('.show').css({
        left: x,
        top: y
    })

    //比例
    var scale1 = $('.left_box').width() / $('.show').width();
    var scale2 = $('.left_box').height() / $('.show').height();
    $('.bimg').css({
        left: -scale1 * x,
        top: -scale2 * y
    })
})
